<template>
  <div class="customer_table">
    <el-table :data="tableInfo.data"
              :highlight-current-row="true"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              @selection-change="handleSelectionChange">
      <el-table-column v-if="selection"
                       type="selection"
                       width="55">
      </el-table-column>
      <el-table-column v-for="(item,index) in tableInfo.column"
                       :key="index"
                       :prop="item.prop"
                       :label="item.label"
                       :width="item.width || 'auto'"
                       :sortable="item.sortable"
                       align="center"
                       :fixed="item.fixed">
        <template slot-scope="scope">
          <div v-if="item.type === 'index'">
            <span>{{ scope.$index + 1 }}</span>
          </div>
          <!--          操作区-->
          <div v-else-if="item.prop === 'action'"
               class="operation">
            <template v-if="item.type === 'PatrolSceneManagement'">
              <el-button @click="edit(scope.row)"
                         type="text"
                         size="small">修改</el-button>
              <el-button @click="deleteRow(scope.row)"
                         type="text"
                         size="small">删除</el-button>
              <el-button @click="viewDetails(scope.row)"
                         type="text"
                         size="small">查看详情</el-button>
            </template>
            <template v-else-if="item.type === 'PatrolInspectionTaskManagement'">
              <el-button @click="actionClick(scope.row,'start')"
                         type="text"
                         size="small">启动</el-button>
              <el-button @click="actionClick(scope.row,'pause')"
                         type="text"
                         size="small">暂停</el-button>
              <el-button @click="actionClick(scope.row,'continue')"
                         type="text"
                         size="small">继续</el-button>
              <el-button @click="actionClick(scope.row,'taskSwitch')"
                         type="text"
                         size="small">任务切换</el-button>
              <el-button @click="actionClick(scope.row,'returnVoyage')"
                         type="text"
                         size="small">一键返航</el-button>
              <el-button @click="actionClick(scope.row,'details')"
                         type="text"
                         size="small">详情</el-button>
            </template>
          </div>
          <div v-else>
            {{ scope.row[item.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CustomerTable",
  props: {
    tableInfo: {
      type: Object,
      default: () => {
      }
    },
    selection: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {
    edit (row) {
      this.$emit('edit', row)
    },
    deleteRow (row) {
      this.$emit('deleteRow', row)
    },
    viewDetails (row) {
      this.$emit('viewDetails', row)
    },
    actionClick (row, type) {
      this.$emit('actionClick', row, type)
    },
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table__header {
  .el-table__cell {
    background-color: #f6f6f6;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
  }
}

/deep/ .el-button {
  font-size: 14px;
}
</style>
